<template>
  <div class="layout">
    <Header />
    <div class="container">
      <Sidebar />
      <main id="main">
        <!-- <Marquee /> -->
        <Breadcrumbs />
        <router-view />
      </main>
    </div>
  </div>
</template>

<script>
import Header from './Header'
import Sidebar from './Sidebar'
import Breadcrumbs from './Breadcrumbs'
// import Marquee from "./Marquee";

export default {
  components: {
    Header,
    Sidebar,
    Breadcrumbs
    // Marquee
  }
}
</script>

<style lang="scss" scoped>
.layout {
  height: 100%;

  .container {
    height: calc(100% - 75px);
    display: flex;
    margin-top: 10px;
  }

  main {
    flex: 1;
    padding: 0 20px;
    overflow-y: scroll;

    &:hover::-webkit-scrollbar-thumb {
      display: block;
    }

    &::-webkit-scrollbar {
      width: 10px;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 6px;
      background-color: rgba(144, 147, 153, 0.3);
      display: none;
    }

    // & > div {
    //   height: calc(100% - 50px);
    // }
  }
}
</style>
